<template>
  <KView class="imgs-upload-item">
    <template v-if="disabled">
      <template v-if="isMiniprogram">
        <KView v-if="value!==''" class="imgs-upload-item-pic">
          <img class="sys-img" :src="value" mode="aspectFit" @click="previewImg">
        </KView>
      </template>
    </template>

    <template v-else>
      <sys-loading mask v-if="imgLoading" size="40%"></sys-loading>
      <template v-if="isMiniprogram">
        <KView v-if="value===''" class="imgs-upload-item-addition flex-central" @click="toChooseImg">
          <sys-svg name="addition2" color="#dddddd"></sys-svg>
        </KView>
        <KView v-else class="imgs-upload-item-pic">
          <img class="sys-img" :src="value" mode="aspectFit" @click="previewImg">
          <KView v-if="hasRemove" class="imgs-upload-item-remove flex-central" @click.stop="remove">
            <sys-svg name="close" color="#ffffff"></sys-svg>
          </KView>
        </KView>
      </template>
    </template>
  </KView>
</template>

<script>
  import QiniuUpload from 'utils/qiniuUpload';
  import SystemUtil from 'utils/systemUtil';

  import SysLoading from 'common/sysLoading';
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      hasRemove: {
        type: Boolean,
        default: true
      },
      hasPreview: {
        type: Boolean,
        default: true
      },
      previewSrcList: {
        type: Array,
        default: () => []
      },
      prefixName: {
        type: String,
        default: ''
      },
      loading: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        imgLoading: false
      };
    },

    methods: {
      toChooseImg() {
        wx.chooseImage({
          count: 1,
          success: res => {
            let filePath = res.tempFilePaths[0];
            let type = filePath.substr(filePath.lastIndexOf('.') + 1);
            if (['jpg', 'jpeg', 'png', 'gif', 'svg'].indexOf(type) === -1) {
              this.$api.showToast({
                title: '上传图片格式只能为jpg,jpeg,png,gif,svg',
                icon: 'none'
              });
              return;
            }

            this.imgLoading = true;
            this.$emit('update:loading', true);
            QiniuUpload.uploadImg(filePath, this.prefixName).then(url => {
              this.toUploadUrl(url);
              this.imgLoading = false;
              this.$emit('update:loading', false);
            }).catch((error) => {
              this.imgLoading = false;
              this.$emit('update:loading', false);
            });
          }
        });
      },

      toUploadUrl(url) {
        this.$emit('input', url);
        this.$emit('upload-success', url);
      },

      remove() {
        this.$emit('input', '');
        this.$emit('remove');
      },

      previewImg() {
        if (!this.hasPreview) {
          return;
        }

        let pic = this.value;
        let previewSrcList = this.previewSrcList;
        if (previewSrcList.length === 0) {
          previewSrcList = [pic];
        }

        let current;
        let index = previewSrcList.indexOf(pic);
        if (index === -1) {
          current = previewSrcList[0];
        } else {
          current = pic;
        }

        wx.previewImage({
          current,
          urls: previewSrcList
        });
      }
    },

    components: {
      SysLoading,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .imgs-upload-item {
    height: 100%;
    position: relative;

    .imgs-upload-item-addition {
      height: 100%;
      background: #f7f7f7;

      .sys-svg {
        width: 40%;
        height: 40%;
      }
    }

    .imgs-upload-item-pic {
      width: 100%;
      height: 100%;
    }

    .imgs-upload-item-remove {
      position: absolute;
      top: 0;
      right: 0;
      width: formatPx(40);
      height: formatPx(40);
      background: rgba(0, 0, 0, .5);

      .sys-svg {
        width: formatPx(26);
        height: formatPx(26);
      }
    }
  }

</style>
